<template>
	<div id="comment">
		<h3 class="text-info">这里是评论界面</h3>
		<div>
			<!--帖子的标题和内容-->
			<div id="postDiv" class="post_comm">
				<div id="post_title" class="text-over">
					<h6>{{post.postTitle}}</h6>
				</div>
				<div class="comm_username text-over">
					<span>{{post.username}}</span>
				</div>
				<div class="comm_content word-wrap">
					<span v-html="post.postContent"></span>
				</div>
				<div class="comm_time text-over">
					<span>{{post.postTime | timef}}&nbsp;</span>
				</div>
			</div>


			<!--帖子的评论-->
			<div id="postComment">
				<div v-for="comment in comments" :key="comment.id">
					<div class="post_comm ">
						<div class="comm_username">
							<span>{{comment.username}}</span>

						</div>
						<div class="comm_content word-wrap">
							<span v-html="comment.commContent"></span>
						</div>
						<div class="comm_time text-over">
							<span>{{comment.commTime | timef}}&nbsp;</span>
						</div>
					</div>

				</div>
				<v-pagination :total="total" :current-page='current' :display='display' @pagechange="pagechange" style="clear: both;"></v-pagination>

			</div>
			<hr />
			<!--帖子的评论区-->
			<div id="postSendComment">
				<form method="post" id="sendComment" @submit.prevent="sendComment">

					<div class="divHeight">

						<quill-editor v-model="comment.content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
						</quill-editor>
					</div>
					<input type="submit" value="评论" class="btn btn-primary" />

				</form>
			</div>
		</div>
	</div>
</template>

<script>

	import { quillEditor } from 'vue-quill-editor';
	import pagination from '../pagination.vue'

	export default {
		data() {
			return {
				comments: [],
				post: {},
				postId: '',
				comment: {
					content: '',


				},
				content: '',
				editorOption: {},
				total: 0, // 记录总条数
				display: 5, // 每页显示条数
				current: 1, // 当前的页数
				commentsAll: {},


			}
		},
		created() {
			this.queryComment();
		},
		methods: {
			sendComment() {
				if(this.$store.state.user != null) {
					this.comment.commTime = this.dateTime();
					this.comment.commUserId = this.$store.state.user[0].id;
					this.comment.commPostId = this.$route.query.id;
					console.log(this.comment);
					if(this.comment.content != '') {
						this.$http.post('/api/sendComment', this.comment, {}).then(data => {
							if(data.status == 200) {

								this.comment.content = '';

								this.queryComment();
							}

						}, err => {
							console.log(err);
						})

					} else {
						console.log(111)
					}
				} else {
					alert("请先登录！");
					this.$router.push({
						name: 'login'
					});
				}

			},
			queryComment() {
				this.postId = this.$route.query.id;

				// 获取帖子信息

				this.$http.get('/api/post', {
					params: {
						id: this.postId
					}
				}).then(data => {

				if(data.status == 200) {

						this.post = data.body[0];
					}
				}, err => {
					console.log(err);
				});

				// 获取评论信息

				this.$http.get('/api/comment', {
					params: {
						id: this.postId
					}
				}).then(data => {

					if(data.status == 200) {
						this.total = data.body.length;
						var start = 0;
						var end = this.display;
						this.commentsAll = data.body;
						if(this.total >= end) {
							this.comments = this.commentsAll.slice(start, end);
						} else {
							this.comments = this.commentsAll.slice(start, this.total);
						}

					}
				}, err => {
					console.log(err);
				})
			},
			dateTime() {
				var dt = new Date();
				var y = dt.getFullYear();
				var m = (dt.getMonth() + 1).toString().padStart(2, "0");
				var d = (dt.getDate()).toString().padStart(2, "0");
				return `${y}-${m}-${d}`
			},

			pagechange: function(currentPage) {
				this.current = currentPage;
				// ajax请求, 向后台发送 currentPage, 来获取对应的数据
				var start = (this.current - 1) * this.display;
				var end = this.current * this.display;
				if(this.total >= end) {
					this.comments = this.commentsAll.slice(start, end);
				} else {
					this.comments = this.commentsAll.slice(start, this.total);
				}
			},

			onEditorBlur(editor) { //失去焦点事件
			},
			onEditorFocus(editor) { //获得焦点事件
			},
			onEditorChange({
				editor,
				html,
				text
			}) {}

		},
		components: {
			'v-pagination': pagination,
		}
	}
</script>

<style scoped>
	#comment {
		width: 700px;
		margin:0 auto
	}
	
	#postComment {
		max-height: 470px;
	}
	
	.divHeight {
		width: 650px;
		height: 250px;
		margin: 0 auto;
		margin-top: 10px;
	}
	
	.quill-editor {
		height: 100px;
	}
</style>